
function box(des){
	self=this;
	this.des=des||1000;
	this.div= document.getElementById('box');
	this.span= document.getElementsByTagName('span');
	this.article= this.div.children[0];
	this.num = this.article.children.length;
	this.startY=0;
	this.oldLen = 0 ;
	this.moveLen =0;
	this.index=0;
	this.intervalid=0;
	this.run = function (){
	  document.getElementsByTagName('html')[0].style.fontSize=screen.height+"px";
	  this.article.style.height = 2*this.num+"rem";  
	  this.article.innerHTML+=this.article.innerHTML;
	  document.addEventListener('touchmove',function(e){e.preventDefault()},false);
	  this.div.addEventListener('touchstart',this.start,false);
	  this.div.addEventListener('touchmove',this.move,false);
	  this.div.addEventListener('touchend',this.end,false);
	  self.intervalid = setInterval(self.interval,self.des);
	}
	this.interval=function(){
		self.index++;
		self.moveLen = -self.index*screen.height;
		self.box();
	}
	//触屏开始
	this.start=function(e){
		clearInterval(self.intervalid);
		self.startY = e.changedTouches[0].pageY;
		if(self.index==0)
		{
			self.index+=self.num;
			self.moveLen = -self.index*screen.height;
			self.css(self.article,self.moveLen,0);
		}
		self.oldLen = self.moveLen;
	}
	//触屏移动
	this.move=function(e){
		var len = e.changedTouches[0].pageY-self.startY;
		self.moveLen=self.oldLen+len;
		self.css(self.article,self.moveLen,300);
	}
	//触屏结束
	this.end=function(e){
		var n = Math.round((e.changedTouches[0].pageY-self.startY)/screen.height);
		self.index-=n;
		self.moveLen = -self.index*screen.height;
		self.box();
		self.intervalid = setInterval(self.interval,self.des);
	}
	this.box=function(){
		if(self.index>=self.num)
		{
			//到了第一组的最后一个
			self.css(self.article,self.moveLen,300,function(){
				self.index=self.index%self.num;
				self.moveLen=-self.index*screen.height;
				self.css(self.article,self.moveLen,0);
			});
		}else{
			self.css(self.article,self.moveLen,300);
		}
	}
	//移动动画
	this.css=function(obj,len,des,callback){
		obj.style.transitionDuration=des+"ms";
		obj.style.transform="translateY("+len+"px)";
		var spans=document.getElementsByClassName('span');
		spans[self.index].className='span span'+(self.index+1);
		for (var i = 0; i < spans.length; i++) {
			if(self.index!=i){
				spans[i].className='span';
			}
		};
		if(callback)
		{
			setTimeout(function(){
				callback();
			},des);
		}
	}

	// this.add=function(n){

	// switch(n) {
	// 	case 1:
			
	// 		self.span.className = 'span1';
	// 		break;
	// 	case 2:
	// 		self.span.className = 'span2';
	// 		break;
	// 	case 3:
	// 		self.span.className = 'span3';
	// 		break;
	// 	case 4:
	// 		self.span.className = 'span4';
	// 		break;
	// }
	// }





}
window.onload=function(){
	var obj = new box(4000);
	obj.run();
}











